<template>
    <div>
        <!-- 
            ref的使用：可用于父组件获取子组件数据
                1.标签中直接编写ref="xxxx"
                2.通过this.$refs.xxxx获取
                3.备注：
                    1.若给html标签打ref，获取的是dom节点
                    2.给组件标签打ref，则获取到的是组件实例

         -->

        <button @click="showData">点我获取焦点</button><br><br>
        <!-- 给input标签打了一个ref，input标签时html内置标签，所以通过this.$ref. -->
        <input type="text" ref="keyWord">


        <!-- 给School标签打了一个ref，School标签时组件标签，所以通过this.$ref.xuexiao获取到的是组件实例 -->
        <School ref='xuexiao' :username="username" />

        <Welcome :receiveData='receiveDataFromChild'/>
    </div>
</template>

<script>

    //引入School标签
    import School from './components/Demo2.vue'
    import Welcome from './components/Welcome.vue'
    export default {
        components: { School,Welcome },
        data(){
            return{
                keyWord:'',
                username:'cc',
                childData:''
            }
        },
        methods:{
            showData(){
                this.$refs.xuexiao.test();
                console.log(this);
                this.$refs.keyWord.focus();
            },
            receiveDataFromChild(data){
                console.log(data);
                this.childData = data;
                //必须引起页面的改变绑定的数据才会变
                this.username = 'bb'
            }
        }
    }
</script>

<style>

</style>